<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-08-29 18:22:31
 * @LastEditors: voanit
 * @LastEditTime: 2022-08-30 19:54:32
-->
<script setup>
import { watch, ref, reactive } from 'vue'
const count = ref(1)
const user = reactive({
  name: 'jack'
})
const btn = () => {
  count.value += 1
  user.name = 'rose'
}

/* 
watch:{
  count(newVal,oldVal){

  }
}

*/
/* 写法1：监听简单数据类型 */
watch(count, (newVal, oldVal) => {

})

/* 写法2：监听复杂数据类型=====只有一个参数是新值 */
watch(user, (newVal) => {
}, {
  immediate: true, // 立即监听
  deep: true // 深度监听
})
/* 写法3：监听复杂数据类型===函数的写法===监听对象中的属性必须写成一个函数 */
watch(() => user.name, (newVal, oldVal) => {
  // console.log(newVal, oldVal);
})

/* 写法4：同时监听多个 */
watch([count, user], (newVal, oldVal) => {
  console.log(newVal, oldVal);
})

</script>
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3==={{ count }}===={{ user.name }}===
    <button @click="btn">按钮</button>
  </div>
</template>
<style lang='less'  scoped>
</style>